import { useState, useCallback } from 'react'
import { LeftOutlined, ArrowRightOutlined, RightOutlined } from '@ant-design/icons';
function TemplateList(props:any) {
    let arr = props.TemplateList
    let [distance, setDistance] = useState(0)
    // 使用 useCallback 创建一个名为 handleClick 的回调函数，接受一个名为 direction 的参数，它只能是 'left' 或 'right'
    const handleClick = useCallback((direction: 'left' | 'right') => {
         // 如果 direction 是 'left'
        if (direction === 'left') {
             // 检查 distance 是否小于等于 -20
            if (distance <= -20) {
                 // 如果是，则通过 setDistance 更新 distance 状态变量，使其增加 20
                setDistance(distance + 20)
            }
        } else { // 否则，即 direction 是 'right'
             // 检查 distance 是否大于等于 -40
            if (distance >= -40) {
                  // 如果是，则通过 setDistance 更新 distance 状态变量，使其减少 20
                setDistance(distance - 20)
            }
        }
        // 依赖数组指定了这个回调函数的依赖为 distance 状态变量
    }, [distance])
    return (
        <div>
            <div className='HomeTemplateList'>
                {/* // 海报导航 */}
                <div className='HomeTemplateTop'>
                    <div>
                        <h2>{arr.title}</h2>
                        <a href="" style={{ color: '#CDA381' }}>开通会员免费用</a>
                        <ul>
                            {
                                arr.tabList.map((item: any, index: number) => (
                                    <span key={index}>{item}</span>
                                ))
                            }
                        </ul>
                    </div>
                    <p>查看更多&gt;</p>
                </div>
                {/* 海报内容渲染 */}
                <div className='HomeTemplateShow'>
                    <div className='HomeTemplateShow_box' style={{ transform: `translateX(${distance}%)` }}>
                        {
                            arr.componentArray.map((component: any, index: number) => (
                                <div className='HomeTemplateShow_item' key={index}>
                                    <div key={index}>{component}</div>
                                </div>
                            ))
                        }
                        <div style={{ background: '#fff' ,lineHeight:'10px'}} className='tab_Navigation_more'>
                            <p><ArrowRightOutlined /></p>
                            <h4>查看更多</h4>
                        </div>
                    </div>
                    {/* 左右箭头 */}
                    <button style={{ display: distance === 0 ? 'none' : 'block' }} onClick={() => handleClick('left')} className='HomeTemplateShow_left'>
                        <LeftOutlined />
                    </button>
                    <button style={{ display: distance === -60 ? 'none' : 'block' }} onClick={() => handleClick('right')} className='HomeTemplateShow_right'>
                        <RightOutlined />
                    </button>
                </div>
            </div>
        </div>
    )
}

export default TemplateList
